<template>
  <div>
    <v-header></v-header>
    <!--内容-->
    <div class="ris_cont">
		<!--新增或修改模态-->
		<div class="ris_dept_modal4" v-show="ris_dept_modal">
			<div class="ris_dept_modal_cont">
				<p class="ris_dept_modal_head">检查部位维护<span class="ris_dept_modal_btn_close" @click="modal_close">X</span></p>
				<table class="ris_dept_modal_tab4">
					<tr>
						<td>部位名称</td>
						<td><input type="text" @blur="getpycode()" v-model="bpname"></td>
					</tr>
					<tr>
						<td>部位组合</td>
						<td>
							<select v-model="partgroupCode">
								<option v-for="bpg in basePartgroups" :value="bpg.code">{{bpg.name}}</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>设备类型</td>
						<td>
							<select v-model="eqptypecode">
								<option v-for="b in baseeqptypes" :value="b.code">{{b.name}}</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>归属系统</td>
						<td><input type="text" v-model="bpsource"></td>
					</tr>
					<tr>
						<td>归属编号</td>
						<td><input type="text" v-model="bpsourcecode"></td>
					</tr>
					<tr>
						<td>拼音码</td>
						<td><input type="text" v-model="bppycode"></td>
					</tr>
					<tr>
						<td>排序号</td>
						<td><input type="number" v-model="bpsortnum" @blur="getsortnum()"></td>
					</tr>
					<tr>
						<td>是否使用</td>
						<td>
							<select v-model="bpisuse">
								<option value="1">是</option>
								<option value="0">否</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>备注</td>
						<td>
							<textarea v-model="bpmemo"></textarea>
						</td>
					</tr>
				</table>
				<div class="ris_dept_modal_btn4">
					<button @click="queding()">确认</button>
					<button class="ris_dept_modal_btn_close" @click="modal_close">取消</button>
				</div>
			</div>
		</div>

		<!--点击删除时候的提示模态-->
		<div class="ris_dept_delete" v-show="deleteModal">
			<div>
				<div class="ris_dept_delete_head">
					<span class="ris_dept_delete_btn_close" @click="closeDeleteModal">X</span>
				</div>
				<p class="ris_dept_delete_text">你确认删除吗？</p>
				<div class="ris_dept_delete_btn">
					<button>确认</button>
					<button class="ris_dept_delete_btn_close" @click="closeDeleteModal">取消</button>
				</div>
			</div>
		</div>

		<div class="ris_cont_headHint">
			<div class="ris_cont_headHint_left">检查部位设置</div>
			<div class="ris_top_basepart">
				<div class="ris_top_basepart_text"></div>
				<div class="inputSearch">
					<input type="text" class="inputSearch_input"  v-model="part_info" @keydown.enter="getbasePart('没有查询到信息')"/>
					<img src="../../../static/img/dictionary/search.png" @click="getbasePart()">

				</div>
			</div>
      <!--<button @click="findbasePart">显示所有部位</button>-->
			<div class="ris_cont_headHint_add" @click="add()">+</div>
		</div>
		<div class="ris_cont_dept">
			<div class="ris_cont_dept_left">
        <h1>
          设备类型选择
        </h1>
				<ul>
					<li v-for="(b,index) in baseeqptypes" :value="b.code" @click="getPartEqptypecode(b.code,index)" :class="index==index2?'ecdlActive':''">{{b.name}}</li>
				</ul>
			</div>
			<div class="ris_cont_dept_right">
				<table class="ris_cont_dept_tab">
					<tr>
						<th>编号</th>
						<th>部位名称</th>
						<th>部位组合</th>
						<th>设备类型</th>
						<th>归属系统</th>
						<th>归属编号</th>
						<th>拼音码</th>
						<th>排序号</th>
						<th>是否使用</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
          <tbody class="ris_cont_dept_tabBody">
            <tr v-for="(bp,index) in baseParts">
              <td>{{bp.code}}</td>
              <td>{{bp.name}}</td>
              <td>{{bp.groupname}}</td>
              <td>{{bp.eqtypename}}</td>
              <td>{{bp.source}}</td>
              <td>{{bp.sourcecode}}</td>
              <td>{{bp.pycode}}</td>
              <td>{{bp.sortnum}}</td>
              <td>{{bp.isuse | usefilter}}</td>
              <td :title="bp.memo">{{bp.memo | length6}}</td>
              <td>
                <button class="ris_cont_dept_tab_change " @click="update(bp.code,bp.partgroupcode,bp.name,bp.eqptypecode,bp.source,bp.sourcecode,bp.pycode,bp.isuse,bp.sortnum,bp.memo,bp.id)">修改</button>
                <button class="ris_cont_dept_tab_delete bg_yellow" @click="deletepart(bp.id)">删除</button>
              </td>
            </tr>
          </tbody>
				</table>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
	export default {
    components: {
      'v-header': Header
    },
		name: 'hello',
		//	    props:{
		//	        root:Object
		//	    },
		created() {
			$pg.pg_page({
				bgColor: '#333', //皮肤颜色
				acColor: '#777', //禁用时候的颜色
				color: '#fff', //字体颜色
			});
			//	        window.location.href = "http://139.217.17.69:8099/pos/authorize?client_id=b8bcd026b8bc47c88c785d77fe91a601&response_type=code&client_key=a482d714becb475da50b9bd1b7031a87&redirect_uri=http://10.0.2.46:8080/qytj/indexRedirect.html";
			//
//			this.$http.get(window.localStorage.url + "/basePart/findbasePart") //遍历部位  suoyou 非isuse
//				.then(function(res1) {
//					if(res1.data.status == 'SUCCESS') {
//						this.baseParts = res1.data.data;
//					}
//				});
			//
			this.$http.get(window.localStorage.url + "/partgroup/findpartGroupByisuse") //遍历部位组合 isuse 1
				.then(function(res) {
					if(res.data.status == 'SUCCESS') {
						this.basePartgroups = res.data.data;
					}
				});

			this.$http.get(window.localStorage.url + "/baseEqptype/getEqptypes") //遍历设备类型 isuse 1
				.then(function(res) {
						this.baseeqptypes = res.data.data;

				});

		},
		data() {
			return {
				url: "",
				ris_dept_modal: false, //新增修改的模态
				//删除的模态
				deleteModal: false,
				//部位
				baseParts: [],
				//buwei组合
				basePartgroups: "",
				//组合code
				partgroupCode: "",
				//设备类型
				baseeqptypes: "",
				//设备code
				eqptypecode: "",
				//添加修改模态show
				addup_show: false,
				//变量 1 添加2 修改
				au_bianlaing: "",

				//part 属性
				bpcode: "",
				bpid: "",
				bpisuse: "",
				bpmemo: "",
				bpname: "",
				bppycode: "",
				bpsortnum: "",
				bpsource: "",
				bpsourcecode: "",
//     查询条件  pycode name
        part_info:"",
//        设备类型选中颜色
        index2:null,
			}
		},
		mounted() {
      $pg.inputRetrieve({
        input:'.inputSearch_input',//input的值
        table:'.ris_cont_dept_tabBody',//ul的值   或者  table:'值'
      });
		},
		methods: {

      findbasePart(){
        this.$http.get(window.localStorage.url + "/basePart/findbasePart") //遍历部位
          .then(function(res1) {
            if(res1.data.status == 'SUCCESS') {
              this.baseParts = res1.data.data;
              this.index2=null;
            }
          });

      },



      //公共弹窗
      addModal:function (text,time) {
        $pg.popup({
          text:text,//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          },
          timeOut:time,
        });
      },

      getbasePart(){
        this.$http.get(window.localStorage.url + "/basePart/getbasePartByinfo?part_info=" + this.part_info)
          .then(function(res) {

          });

      },
		  //设备下组合code查询
      getPartEqptypecode(code,index){
        this.eqptypecode=code;//删除时
        this.index2=index;
        this.$http.get(window.localStorage.url + "/basePart/getpartByEqptypecode?Eqptypecode=" + code)
          .then(function(res) {
            if(res.data.status == 'SUCCESS') {
              this.baseParts = res.data.data;
            }else{
//              this.addModal(res.data.data,true);//公共弹窗
            console.log("该设备下无部位！");
              this.baseParts="";
            }
          });
     },

      //sortnum 为空时默认为0
      getsortnum(){
        if(this.bpsortnum==""){
          this.bpsortnum=0;
        }
      },


			getpycode() {
				this.$http.get(window.localStorage.url + "/pytool/getPyCode?name=" + this.bpname)
					.then(function(res) {
//						console.log(res.data + "拼音码");
						if(res.data.status == 'SUCCESS') {
							this.bppycode = res.data.data;
						}
					});
			},

			//init
			add() {
				this.bpcode = "";
				this.bpid = "";
				this.bpisuse = 1;
				this.bpmemo = "";
				this.bpname = "";
				this.bppycode = "";
				this.bpsortnum = "";
				this.bpsource = "";
				this.bpsourcecode = "";
				this.ris_dept_modal = true;
				this.au_bianlaing = 1;
				this.$http.get(window.localStorage.url + "/basePart/findMaxNum")
					.then(function(res) {
						this.bpsortnum = res.data.data;

					});
			},
			update(code, partgroupcode, name, eqptypecode, source, sourcecode, pycode, isuse, sortnum, memo, id) {
				this.bpcode = code;
				this.bpid = id;
				this.bpisuse = isuse
				this.bpmemo = memo;
				this.bpname = name;
				this.bppycode = pycode
				this.bpsortnum = sortnum;
				this.bpsource = source;
				this.bpsourcecode = sourcecode;
				this.partgroupCode = partgroupcode;
				this.eqptypecode = eqptypecode;
				this.ris_dept_modal = true;
				this.au_bianlaing = 2;
			},
			queding() {

        if(this.bpname==""){

          $pg.popup({
            text:"部位名称不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            determine:function(){

            },//点击确定执行的方法
          });

          return;
        }
        console.log(this.partgroupCode=="");
        if(this.partgroupCode==""){

          $pg.popup({
            text:"部位组合不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            determine:function(){

            },//点击确定执行的方法
          });

          return;
        }


        if(this.eqptypecode==""){

          $pg.popup({
            text:"设备类型不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            determine:function(){

            },//点击确定执行的方法
          });

          return;
        }




//        if(this.bpsortnum==""){
//
//          $pg.popup({
//            text:"排序号不能为空！",//显示的文本
//            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
//            btnBgColor:'#4f56a3',//按钮的颜色
//            determine:function(){
//
//            },//点击确定执行的方法
//          });
//
//          return;
//        }

				//添加
				if(this.au_bianlaing == 1) {
					this.$http.get(window.localStorage.url + "/basePart/addbasedept?partgroupCode=" + this.partgroupCode + "&name=" + this.bpname + "&eqptypecode=" + this.eqptypecode + "&source=" + this.bpsource +
							"&sourceCode=" + this.bpsourcecode + "&pycode=" + this.bppycode + "&isuse=" + this.bpisuse + "&sortnum=" + this.bpsortnum + "&memo=" + this.bpmemo)
						.then(function(res) {
							if(res.data.status == 'SUCCESS') {
								this.ris_dept_modal = false;

                this.addModal(res.data.data,1);//公共弹窗 wenben 时间

//								this.$http.get(window.localStorage.url + "/basePart/findbasePart") //遍历部位
//									.then(function(res1) {
//										if(res1.data.status == 'SUCCESS') {
//											this.baseParts = res1.data.data;
//										}
//									});

                this.$http.get(window.localStorage.url + "/basePart/getpartByEqptypecode?Eqptypecode=" + this.eqptypecode)
                  .then(function(res) {
                    if(res.data.status == 'SUCCESS') {
                      this.baseParts = res.data.data;
                      for(var i in this.baseeqptypes){//设备颜色
                        if(this.baseeqptypes[i].code==this.eqptypecode){
                          this.index2=i;
//                          console.log(i)
                        }
                      }
//                      this.
                    }else{
//              this.addModal(res.data.data,true);//公共弹窗
                      console.log("该设备下无部位！");
                      this.baseParts="";
                    }
                  });

							} else {
                this.addModal(res.data.data,true);//公共弹窗

							}
						});
				}

				//修改
				if(this.au_bianlaing == 2) {
					this.$http.get(window.localStorage.url + "/basePart/updatebasepart?partgroupCode=" + this.partgroupCode + "&name=" + this.bpname + "&eqptypecode=" + this.eqptypecode + "&source=" + this.bpsource +
							"&sourceCode=" + this.bpsourcecode + "&pycode=" + this.bppycode + "&isuse=" + this.bpisuse + "&sortnum=" + this.bpsortnum + "&memo=" + this.bpmemo + "&code=" + this.bpcode + "&id=" + this.bpid)
						.then(function(res) {
							if(res.data.status == 'SUCCESS') {
								this.ris_dept_modal = false;

                this.addModal(res.data.data,1);//公共弹窗 wenben 时间

//								this.$http.get(window.localStorage.url + "/basePart/findbasePart") //遍历部位
//									.then(function(res1) {
//										if(res1.data.status == 'SUCCESS') {
//											this.baseParts = res1.data.data;
//										}
//									});
                this.$http.get(window.localStorage.url + "/basePart/getpartByEqptypecode?Eqptypecode=" + this.eqptypecode)
                  .then(function(res) {
                    if(res.data.status == 'SUCCESS') {
                      this.baseParts = res.data.data;

                      for(var i in this.baseeqptypes){//设备颜色装换
                        if(this.baseeqptypes[i].code==this.eqptypecode){
                          this.index2=i;
                          console.log(i)
                        }
                      }

                    }else{
//              this.addModal(res.data.data,true);//公共弹窗
                      console.log("该设备下无部位！");
                      this.baseParts="";
                    }
                  });

							} else {

                this.addModal(res.data.data,true);//公共弹窗 wenben 时间
							}
						});
				}
			},
			//删除按钮
			deletepart(id) {
				var _this = this;
//				console.log(id);
				$pg.popup({
					text: "确定删除吗？", //显示的文本
					btnClass: 'deletepart', //确定按钮的类值  必传  方便查找确定按钮的class值reBtn
					btnBgColor: '#4f56a3', //按钮的颜色
					determine: function() {
						_this.$http.get(window.localStorage.url + "/basePart/deletebasepart?id=" + id)
							.then(function(res) {
								if(res.data.status == 'SUCCESS') {

                  this.addModal(res.data.data,1);//公共弹窗 wenben 时间

                  _this.$http.get(window.localStorage.url + "/basePart/getpartByEqptypecode?Eqptypecode=" + _this.eqptypecode)
                    .then(function(res) {
                      if(res.data.status == 'SUCCESS') {
                        _this.baseParts = res.data.data;
                        for(var i in _this.baseeqptypes){//设备颜色
                          if(_this.baseeqptypes[i].code==_this.eqptypecode){
                            _this.index2=i;
                            console.log(i)
                          }
                        }
//                      this.
                      }else{
//              this.addModal(res.data.data,true);//公共弹窗
                        console.log("该设备下无部位！");
                        _this.baseParts="";
                      }
                    });
								}else{
                  this.addModal(res.data.data,true);//公共弹窗 wenben 时间
                }
							});

					}, //点击确定执行的方法
				});
			},

			//init
			ris_cont_headHint_add(num) {
				this.ris_dept_modal = true;

			},
			//关闭模态
			modal_close() {
				this.ris_dept_modal = false;
			},
			//关闭删除的模态
			closeDeleteModal() {
				this.deleteModal = false;
			}

		},

		filters: {
			//过滤器
			usefilter(isuse) {
				if(isuse == 1) {
					return "是";
				} else{
					return "否";
				}
			},
      length6(text){
        text=$.trim(text)+"";
        if(text.length>=7){
          text=text.slice(0,6);
          text=text+"...";
          return text;
        }else{
          return text;
        }
      },

		},
		//	    beforeUpdate() {
		//		    this.$nextTick(function(){
		//
		//		    })
		//		},

	}
</script>

<style scoped>
	.ris_cont_dept_left{
		width: 14%;
		border: 1px solid #999;
		float: left;
		box-sizing: border-box;
		margin-top: 15px;
	}
	.ris_cont_dept_left>h1{
		padding: 0 10px;
		line-height: 36px;
		color: #fff;
		background: #999;
	}
	.ris_cont_dept_left>ul{
		height: 500px;
		overflow: auto;
	}
	.ris_cont_dept_left>ul>li{
		border-bottom: 1px solid #ccc;
		font-size: 14px;
		padding: 0 10px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		line-height: 32px;
		cursor: pointer;
	}
	.ris_cont_dept_right{
		width: 85%;
		float: right;
	}



	.ris_cont_headHint_left,
	.ris_top_basepart {
		display: inline-block;
		float: left;
	}

	/*.ris_top_basepart>select {
		display: block;
		float: left;
		width: 150px;
		margin: 0 20px;
		position: relative;
		top: 7px;
	}*/
	.ris_top_basepart_text{
		padding: 0 10px 0 20px;
		display: inline-block;
		float: left;
	}

	.inputSearch {
		width: 180px;
		float: left;
		position: relative;
	}

	.inputSearch input {
		width: 100%;
		padding: 0 30px 0 10px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.inputSearch>img {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 0;
		top: 8px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		cursor: pointer;
	}

	.ris_cont_headHint {
		height: 40px;
		background-color: #999;
		color: #f1f1f1;
		line-height: 40px;
		padding-left: 30px;
		box-sizing: border-box;
	}
	/*新增按钮*/

	.ris_cont_headHint_add {
		width: 70px;
		text-align: center;
		font-size: 28px;
		font-weight: bold;
		float: right;
		background-color: #666;
		color: #fff;
		cursor: pointer;
	}
	/*内容区*/

	.ris_cont_dept {
		width: 95%;
		margin: 0 auto;
		background-color: #fff;
	}

	.ris_cont_dept_tab {
		width: 100%;
		line-height: 40px;
		font-size: 12px;
		text-align: center;
		margin-top: 15px;
	}

	.ris_cont_dept_tab tr td,
	.ris_cont_dept_tab tr th {
		border: 1px solid #ddd;
	}

	.ris_cont_dept_tab tr th {
		background-color: #666;
		color: #fff;
	}

	.ris_cont_dept_tab tr td:last-child {
		width: 10%;
	}

	.ris_cont_dept_tab tr td:last-child button {
		width: 35%;
		height: 26px;
		margin: 0 3%;
		color: #fff;
		border: 0;
		border-radius: 3px;
		cursor: pointer;
	}

	.ris_cont_dept_tab tr td:last-child button.ris_cont_dept_tab_change {
		background-color: #215c84;
	}
	/*新增或修改的模态*/

	.ris_dept_modal4 {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(66, 66, 66, .2);
		z-index: 2;
		/*display: none;*/
	}

	.ris_dept_modal4>div {
		position: absolute;
		width: 400px;
		height: 520px;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -260px;
		border: 1px solid #000;
		background: #f7f7f7;
		border-radius: 10px;
	}
	/*模态头部*/

	.ris_dept_modal_head {
		height: 40px;
		line-height: 40px;
		padding-left: 20px;
		border-bottom: 1px solid #666;
		background: #999;
		border-radius: 10px 10px 0 0;
		font-size: 14px;
		color: #fff;
	}

	.ris_dept_modal_head span {
		display: inline-block;
		float: right;
		padding: 0 20px;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
	}
	/*模态里面的内容*/

	.ris_dept_modal_tab4 {
		width: 85%;
		margin: 0 auto;
		line-height: 40px;
		margin-top: 20px;
	}

	.ris_dept_modal_tab4 tr td:nth-child(1) {
		width: 20%
	}

	.ris_dept_modal_tab4 tr td:nth-child(2) {
		width: 80%
	}

	.ris_dept_modal_tab4 tr td input,
	.ris_dept_modal_tab4 tr td select {
		width: 100%;
		height: 28px;
		border: 1px solid #666;
		border-radius: 3px;
		box-sizing: border-box;
	}

	.ris_dept_modal_tab4 tr td textarea {
		width: 100%;
		height: 60px;
		border: 1px solid #666;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 10px;
	}

	.ris_dept_modal_btn4 {
		text-align: right;
	}

	.ris_dept_modal_btn4 button {
		width: 80px;
		height: 36px;
		background-color: #215c84;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		margin-right: 50px;
		border: 0;
		border-radius: 5px;
		cursor: pointer;
	}

	.ris_dept_modal_btn4 button:hover {
		background-color: #1a4161;
	}
	/*点击删除弹出的模态框*/

	.ris_dept_delete {
		position: fixed;
		z-index: 2;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(66, 66, 66, .2);
		/*display: none;*/
	}

	.ris_dept_delete>div {
		position: absolute;
		width: 260px;
		height: 150px;
		left: 50%;
		top: 50%;
		margin-left: -130px;
		margin-top: -75px;
		border: 1px solid #000;
		border-radius: 10px;
		background-color: #fff;
	}

	.ris_dept_delete_head {
		height: 30px;
		text-align: right;
		background-color: #999;
		border-radius: 10px 10px 0 0;
	}

	.ris_dept_delete_head span {
		display: inline-block;
		padding: 0 20px;
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
	}
	/*文字*/

	.ris_dept_delete_text {
		line-height: 70px;
		padding-left: 20px;
		font-size: 14px;
		color: #666;
	}
	/*按钮*/

	.ris_dept_delete_btn {
		text-align: right;
	}

	.ris_dept_delete_btn button {
		width: 70px;
		background-color: #215c84;
		color: #fff;
		border: 0;
		border-radius: 5px;
		cursor: pointer;
		font-size: 14px;
		height: 30px;
		margin-right: 20px;
	}

	.ris_dept_delete_btn button:hover {
		background-color: #1a4161;
	}
  .ecdlActive{
    background: #eaeaea;
  }
</style>
